<template>
  <div>
    <el-form
      :model="entity"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="dialog-form"
    >
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item style="width: 100%" label="上级部门" prop="parentId">
            <department-select
              v-model="entity.parentId"
              :clearable="true"
            ></department-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item style="width: 100%" label="编码" prop="code">
            <el-input
              :disabled="disabled"
              placeholder="编码"
              v-model="entity.code"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="部门名称" prop="name">
            <el-input
              :disabled="disabled"
              placeholder="部门名称"
              v-model="entity.name"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="负责人" prop="mngrId">
            <el-input
              :disabled="disabled"
              placeholder="负责人"
              v-model="entity.leader"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="类型" prop="type">
            <el-select
              style="width: 100%"
              v-model="entity.type"
              :disabled="true"
            >
              <el-option :key="0" :value="0" :label="'0--部门'"></el-option>
              <el-option :key="1" :value="1" :label="'1--班组'"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="有效" prop="enabled">
            <el-select
              style="width: 100%"
              v-model="entity.enabled"
              :disabled="disabled"
            >
              <el-option :key="true" :value="true" :label="'是'"></el-option>
              <el-option :key="false" :value="false" :label="'否'"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<style lang="less" scoped>
.productLogo .el-upload-dragger {
  img {
    width: 200px;
    height: 100px !important;
  }
}

.clsCommon {
  margin-top: 10px;
  margin-left: -15px;
  margin-right: 15px;
}

.dialog-form {
  .el-radio-group {
    .el-radio {
      display: flex;
      align-items: center;
    }

    label {
      height: 40px;
    }
    .group-text {
      display: inline-block;
      width: 100px;
    }
    .title-text {
      display: inline-block;
      width: 120px;
    }
  }
}
</style>

<script>
// import ProductTypeSelect from '@/components/widgets/dongxw/ProductTypeSelect.vue';

import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
const defaultEntity = {
  id: null, //  标识
  parentId: -1, //  父节点
  isParent: null, //  isParent
  code: "none", //  编码
  name: null, //  部门名称
  mngrId: 0, //  负责人
  type: 0, //  类型
  enabled: true,
  depPath: null, //  depPath
};
export default {
  components: { DepartmentSelect },
  data() {
    return {
      disabled: false,
      isShow: true,
      multiple: true,
      isExp: false,
      activeName: "productInfo",

      ruleTpl: { when: null, then: null },
      entity: _.cloneDeep(defaultEntity),
      dateRange: [],
      oldProps: [],
      ruleDefs: [],
      isDisabled: false,
      limitTotal: false,
      rules: {
        code: [
          {
            // required: true,
          },
        ],
      },
    };
  },
  computed: {
    cbm: {
      get() {
        let v = this.entity.obSize.split("*");

        if (v.length === 3) {
          var multi = function (a, b) {
            return parseInt(a) * parseInt(b);
          };
          return (v.reduce(multi, 1) / 1000000).toFixed(4);
        }
        return 0;
      },
    },
  },
  methods: {
    clearImg() {
      this.entity.picUrl = null;
    },

    funHandleChange(imgRemarkArray) {},

    getProps(scope) {
      return this.entity.props.filter((p) => p.propScope == scope);
    },
    onRuleDefsLoaded(opts) {
      this.ruleDefs = opts || [];
      this.resetProps();
    },

    resetProps() {},
    setValues(vals) {
      this.resetEntity = _.cloneDeep(vals);
      this.entity = _.cloneDeep(this.resetEntity);
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.entity);

          this.$api.hr.DepartmentService.save(params).then((rsp) => {
            this.$msgJsonResult(rsp);
            if (rsp.code === 200) {
              this.$emit("saved", rsp);
            }
          });
        }
      });
    },
    resetForm() {
      this.entity = _.cloneDeep(defaultEntity);
      if (!this.entity.id) {
        //this.entity.updatedAt = this.$dongxwDict.formatDateZero(new Date());
      }
    },
    init(options) {
      //debugger
      this.resetForm();
      if (options.id) {
        this.$api.hr.DepartmentService.findById(options.id).then((r) => {
          this.entity = r.data;
        });
      } else {
        this.isDisabled = false;
      }
    },
  },
  mounted() {
    this.$on("init", this.init);
    this.$on("submit", this.submitForm);
  },
};
</script>
